Plot a responsive layout
繪製響應式佈局
案例分析：越南家常菜譜網站
- 桌面版：使用 四欄佈局，充分利用大屏空間展示內容。
- 手機版：自動切換為 單欄佈局，便於豎屏瀏覽，資訊清晰易讀。
- 橫屏時：佈局再次調整，充分適應不同瀏覽方式。
如何作為UX設計師實現響應式設計？
1 從紙面線框圖開始：
- 先為桌面版本繪製完整的線框圖。
- 使用網點紙或方格紙，幫助你保持設計元素尺寸一致性。
- 將桌面版本按比例縮小到1/3大小，以適配手機螢幕。
2 建立移動端線框圖：
- 將原有元素重新佈局成適合窄屏的樣式。
- 例如，把橫向導航變為“漢堡選單”，多欄內容變為單欄滾動展示。
3 繪製中間尺寸（如平板）版本：讓設計適配不同的斷點（Breakpoints），確保響應式設計覆蓋所有主流裝置。
4 為關鍵頁面繪製多個螢幕尺寸版本的線框圖，不僅限於首頁。
使用 A5紙 畫移動端線框圖時，如果空間不足，可以拼接兩頁紙。
在繪製過程中注意哪些元素要保留、隱藏或重排。
頁面內容要簡潔，避免在小螢幕中資訊過載。